<template>
  <dys-search-form
    @search="reload"
    @reset="Object.assign(queryParams, initValue())"
  >
    <a-col :span="6">
      <a-form-item :label="t('菜单名称')">
        <a-input
          v-model:value="queryParams.menuName"
          :placeholder="t('请输入菜单名称')"
        ></a-input>
      </a-form-item>
    </a-col>
    <a-col :span="6">
      <a-form-item :label="t('菜单编码')">
        <a-input
          v-model:value="queryParams.menuCode"
          :placeholder="t('请输入菜单编码')"
        ></a-input>
      </a-form-item>
    </a-col>
    <a-col :span="6">
      <a-form-item :label="t('菜单状态')">
        <a-select
          v-model:value="queryParams.menuStatus"
          :placeholder="t('请选择菜单状态')"
          :options="[
            { label: () => t('有效'), value: 'Y' },
            { label: () => t('无效'), value: 'N' },
          ]"
        ></a-select>
      </a-form-item>
    </a-col>
  </dys-search-form>
  <dys-table
    :loading="state.loading"
    :columns="columns"
    :pagination="state.pagination"
    :data-source="state.dataSource"
    default-size="small"
    @reload="reload"
    @change="handleChange"
  >
    <template #extraLeft>
      <a-button type="primary" v-auth:ADD @click="modalProps.open = true">
        <PlusCircleOutlined />
        {{ t("新增") }}
      </a-button>
    </template>
    <template #bodyCell="{ column, text, record }">
      <status-tag
        v-if="column.dataIndex == 'menuStatus'"
        :value="text"
      ></status-tag>
      <template v-else-if="column.dataIndex == 'operation'">
        <a-button
          v-auth:FUNCTION
          type="link"
          size="small"
          @click="
            fnProps.model = record;
            fnProps.open = true;
          "
          >{{ t("功能") }}</a-button
        >
        <a-button
          v-auth:UPDATE
          type="link"
          size="small"
          @click="
            modalProps.model = record;
            modalProps.open = true;
          "
        >
          {{ t("编辑") }}
        </a-button>
        <a-button
          v-auth:DELETE
          type="link"
          size="small"
          danger
          @click="handleDelete(record)"
        >
          {{ t("删除") }}
        </a-button>
      </template>
    </template>
  </dys-table>
  <edit-modal
    :open="modalProps.open"
    :model="modalProps.model"
    @cancel="
      modalProps.model = null;
      modalProps.open = false;
    "
    @ok="reload"
  ></edit-modal>
  <function-modal
    :open="fnProps.open"
    :model="fnProps.model"
    @cancel="
      fnProps.model = null;
      fnProps.open = false;
    "
  ></function-modal>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { useI18n } from "vue-i18n";
import { message } from "ant-design-vue";
import { useFetchPage } from "@/hook/useFetchPage";
import { del, queryByPage } from "@/api/system/menu";
import type { TableColumnsType } from "ant-design-vue";
import type { EditModalProps, FnModalProps } from "./typing";
import type { QueryParams, QueryResult } from "@/api/system/menu/typing";
import EditModal from "./components/edit-modal.vue";
import StatusTag from "@/components/status-tag/index.vue";
import FunctionModal from "./components/function-modal.vue";
const { t } = useI18n();
const initValue = (): QueryParams => ({
  menuName: null,
  menuCode: null,
  menuStatus: null,
});
const queryParams = reactive(initValue());
const columns = reactive<TableColumnsType>([
  { title: () => t("菜单名称"), dataIndex: "menuName" },
  { title: () => t("菜单编码"), dataIndex: "menuCode" },
  { title: () => t("菜单状态"), dataIndex: "menuStatus" },
  { title: () => t("操作"), dataIndex: "operation", fixed: "right" },
]);
const { state, reload, handleChange } = useFetchPage(queryByPage, {
  params: queryParams,
});
const modalProps = reactive<EditModalProps>({
  open: false,
  model: null,
});
/**删除 */
const handleDelete = async (record: QueryResult) => {
  const { success } = await del({ menuId: record.menuId });
  if (success) {
    message.success(t("删除成功"));
    reload();
  }
};
/**功能弹窗 */
const fnProps = reactive<FnModalProps>({
  open: false,
  model: null,
});
</script>
